<script type="text/javascript">

	$(document).ready(function(){
		//Seleccionas todos los parrados
		$('p').click(function(){
			$(this).hide();
		});
		
		$('p').css('border','3px dotted red');
		
		$('#tabla').dataTable();
	});
	
	/*function init(){
		alert('Hola mundo');
	}

	//Esperamos a cargar toda la pagina para llamar a la funcion de init
	window.onload = init();*/

  function EnviarGet(){
	  if(ValidarCampos()){
	  	cadena="request-info?nombre="+document.getElementById("nombre").value;
	  	cadena+="&email="+document.getElementById("email").value;
	  	if (document.getElementById("hombre").checked){
		  	sexo="Hombre";
	  	}else{
		  	sexo="Mujer";
	  	}
	  	cadena+="&sexo="+sexo;
	  	this.location.href=cadena;
	  }
  }
  
  function ValidarForm(){
	 if(ValidarCampos()){
		document.getElementById("f1").submit();
	}
  }
  
  function ValidarCampos(){
	  valido=false;
	  if(document.getElementById("nombre").value==""){
		  alert("Debe rellenar el campo Nombre");
	  }else{
		  if(document.getElementById("email").value==""){
			  alert("Debe rellenar el campo Email");
		  }else{
	  		valido=true;
		  }
	  }
	  return valido;
  }
</script>
<%@ include file="includes/head.jsp" %>
<%@page import="java.util.Properties"%>
<%@page import="java.text.MessageFormat"%>
<header>
	<h1>	
	<span>
	<%
	String user = (String) session.getAttribute("username");
	if (user != null){
		//Cargamos todos los properties
		Properties propertiesMsg = (Properties) this.getServletContext().getAttribute("mensajes");
		out.println(MessageFormat.format(
				propertiesMsg.getProperty("login.success"), request
				.getSession().getAttribute("username")));
	}else{
		out.println("[x] No registrado");
	}
	%>
	</span>
	<br/>
	<span>
	${sessionScope.user}
	<%=new Date() %><br/>
	<%=Utilidades.getActualDate() %>
	</span>
	</h1>
	<h2>
		<a href="logout" title="Desconectar">[X] Desconectar</a>
	</h2>
</header>	
	<!-- TAG NAV aporta un valor semantico para el contenido interno, en este caso de NAVegacion -->
	<nav>
		<ol><!-- Ordered list -->
			<li><a href="psx">Primer servlet</a></li>
			<li><a href="request-info">Request Info por GET</a></li>
			<li><a href="ranking">Ranking</a></li>
			<li><a href="formSubidaFichero.jsp">Subida fichero</a></li>
			<li><a href="javascript.jsp">Ejemplos de JavaScript</a></li>
			<li><a href="jquery.jsp">Ejemplos de JQuery</a></li>
			<li><a href="formularioAcuseRecibo.jsp">Formulario Acuse Recibo</a></li>
			<li><a href="login.jsp">Login</a></li>
		</ol>
	</nav>
	
	<hr/>
	
	<!-- Formulario para realizar peticion POST al Request de Info -->
	<form id="f1" action="request-info" method="post">
		<input id="nombre" type="text" name="nombre" placeholder="Escribe tu nombre"/><br/>
		<input id="email" type="email" name="email" placeholder="Escribe tu email"/><br/>
		<input id="hombre" type="radio" name="sexo" value="Hombre" checked>Hombre</input>
		<input id="mujer" type="radio" name="sexo" value="Mujer">Mujer</input><br/>
		<input type="button" value="Enviar por POST" onclick="ValidarForm();"/> 
		<input type="button" value="Enviar por GET" onclick="EnviarGet();"/>
	</form>
	<hr/>

	<table id="tabla" border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="2">Pie de pagina</td>
    </tr>
  </tfoot>
  <tbody>
  <%for(int i=0;i<500;i++){ %>
    <tr>
      <td>January<%=i %></td>
      <td>$100<%=i %></td>
    </tr>
    <tr>
      <td>February<%=i %></td>
      <td>$80<%=i %></td>
    </tr>
  <%} %>
  </tbody>
</table> 

	<% for(int i=1;i<7;i++){ %>
	<h<%=i %>>Cabecera <%=i %></h<%=i %>>
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec orci quam, auctor a sodales ac, placerat non purus. Cras ultricies condimentum risus nec vulputate. Proin suscipit vel nulla a facilisis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec tristique, orci vitae iaculis varius, est nunc laoreet dolor, ut consectetur arcu quam ut massa. Ut feugiat ligula velit, non dictum nisl mattis aliquet. Vivamus id feugiat eros. Proin lectus lectus, faucibus et venenatis sed, venenatis vitae nunc. Pellentesque consectetur nec ipsum non auctor. Mauris pretium rutrum arcu, id laoreet urna egestas eu. 
	</p>	
	<% } 
	 for(int i=1;i<7;i++){
		 out.print("<h"+i+">Cabecera "+i+"</h"+i+">");
	 }
	%>
<%@ include file="includes/footer.jsp" %>	